<template>
<div class="job-settings">
    <el-form ref="job" :model="dispatchData.form" :rules="rules" @submit.native.prevent label-width="100px">
        <el-form-item style="margin-right: 16px;" label="任务名称" prop="scheduleName">
            <el-input v-model="dispatchData.form.scheduleName" placeholder="请输入任务名称"></el-input>
        </el-form-item>
        <el-form-item class="job-settings-upstreamtask" label="上游任务依赖">
            <el-button @click="hanldeClick">选择上游任务依赖</el-button>
            <el-table class="job-settings-table" v-if="dispatchData.form.upstreamSchedules.length" :data="dispatchData.form.upstreamSchedules" style="width: 100%">
                <el-table-column show-overflow-tooltip prop="scheduleName" label="任务名称"></el-table-column>
                <el-table-column show-overflow-tooltip prop="period" label="调度周期"></el-table-column>
                <el-table-column show-overflow-tooltip prop="schedulTimeStr" label="调度时刻"></el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item label="任务描述">
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="dispatchData.form.description">
        </el-input>
        </el-form-item>
    </el-form>
    <add-job v-if="addJobDialog.show" :data="addJobDialog" @getJobList="getJobList"></add-job>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import addJob from './AddJob'
import moment from 'moment'
export default {
    name: 'JobSetting',
    components: {
        addJob
    },
    props: {
        dispatchData: {
            required: true,
            type: Object
        }
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId',
            experimentId: 'common/getExperimentId'
        })
    },
    data () {
        var checkScheduleName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('任务名称不能为空'))
            }
            let params = {
                projectId: this.projectId,
                scheduleName: value
            }
            this.$post('/experiment/existsScheduleName', params).then(res => {
                if (!res) {
                    callback()
                } else {
                    callback(new Error('任务名称不能重复'))
                }
            })
        }
        return {
            rules: {
                scheduleName: [{ required: true, validator: checkScheduleName, trigger: 'blur' }]
            },
            addJobDialog: {
                show: false,
                allData: [],
                selectData: []
            }
        }
    },
    methods: {
        getJobList (arr) {
            this.dispatchData.form.upstreamSchedules = this.$parent.$parent.init(arr)
        },
        hanldeClick () {
            let { cronObj, periodType, status, time, scheduleName, upstreamSchedules, downstreamSchedules } = this.dispatchData.form
            let params = {
                projectId: this.projectId,
                experimentId: this.experimentId,
                cronObj: JSON.stringify(cronObj),
                periodType,
                status,
                effDate: time[0] && moment(time[0]).format('YYYY-MM-DD HH:mm:ss'),
                endDate: time[1] && moment(time[1]).format('YYYY-MM-DD HH:mm:ss'),
                scheduleName,
                upstreamSchedules,
                downstreamSchedules
            }
            this.$post('/experiment/queryAvailableRelationSchedules', params).then(res => {
                if (res) {
                    this.addJobDialog = {
                        show: true,
                        allData: this.$parent.$parent.init(res),
                        selectData: upstreamSchedules
                    }
                }
            })
        },
        handleSave () {
            this.$refs['job'].validate((valid) => {
                if (valid) {
                    this.$emit('save')
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less">
.job-settings {
    .el-form .el-textarea__inner {
        width: 245px !important;
    }
    .el-form .el-button {
        width: 180px !important;
        border-color: #2680EB;
        color: #2680Eb;
    }
    .job-settings-table {
        height: 100%;
        border: 1px solid #EBEEF5;
        margin-top: 20px;
        .el-table__header tr th{
            padding: 0;
        }
        .el-table__body-wrapper {
            height: 140px;
            overflow-x:hidden;
            overflow-y:auto;
        }
        tbody tr{
            td {
                padding: 8px 0;
            }
            &:last-child td {
                border-bottom: 0;
            }
        }
    }
    .job-settings-upstreamtask {
        .el-form-item__content {
            display: flex;
            flex-direction: column;
        }
    }
}
</style>
